<!-- Created by henian.xu on 2018/11/8. -->

<template>
    <div
        class="dropdown"
        @click="onSwitch"
        ref="self">
        {{ value||'请选择' }}
        <i
            class="f-icon"
            v-if="popupShow">&#xf106;</i>
        <i
            class="f-icon"
            v-else>&#xf107;</i>

        <!-- popup -->
        <XMenu
            v-clickoutside="close"
            class="dropdown-popup"
            :style="positionStyle"
            ref="popup"
            float
            :data="data"
            v-model="model"
            @input="onMenuInput"
            v-show="popupShow"/>
    </div>
</template>

<script>
import PopupMixin from '~/mixins/popup.vue';
import clickoutside from '~/utils/ClickOutSide.js';
export default {
    name: 'Dropdown',
    mixins: [PopupMixin],
    directives: { clickoutside },
    data() {
        return {
            alignSelf: true,
        };
    },
    props: {
        value: {
            type: [String, Number],
            default: '',
        },
        data: {
            type: Array,
            required: true,
        },
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    methods: {
        onMenuInput() {
            this.popupShow = false;
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
$className: $pf + dropdown;
$height: 40px;
.#{$className} {
    position: relative;
    display: inline-block;
    padding: 0 $padding;
    cursor: pointer;
    line-height: $height;
    border: 1px solid $gray2;

    > .f-icon {
        font-size: 75%;
    }

    &-popup {
        position: absolute;
        z-index: $z-index-7;
        &.menu {
            background-color: #fff;
            box-shadow: 0 5px 8px -4px rgba(0, 0, 0, 0.3);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    }
}
</style>
